<template>
    <div>
        <div class="modifyandaddpatient_container" style="padding-bottom:0;">
            <div style="overflow: auto;">
                <!-- 头像 -->
                <div class="modify_patient_container" >
                    <div class="mine_navigator_item modify_patient_container_left">
                        <div>宝宝头像</div>
                        <div style="color:#fe3116;">*</div>
                    </div>
                    <div  class="modify_patient_container_value"></div>
                    <el-upload
                            class="avatar-uploader"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar" width="50px" height="50px">
                        <i v-else>
                            <el-avatar  :src="circleUrl"></el-avatar>
                        </i>
                    </el-upload>
                </div>
                <!-- 姓名 -->
                <div class="modify_patient_container" style="border-top:0.5px solid #e7e7e7;">
                    <div class="mine_navigator_item modify_patient_container_left">
                        <div>昵称</div>
                        <div style="color:#fe3116;">*</div>
                    </div>
                    <div  class="modify_patient_container_value"></div>
                    <router-link to="/tow"><el-input v-model="input" placeholder="请输入昵称"></el-input></router-link>

                </div>
                <!-- 性别 -->
                <div class="modify_patient_container" style="border-top:0.5px solid #e7e7e7;" @click="drawer = true" >
                    <div class="mine_navigator_item modify_patient_container_left">
                        <div>
                           性别
                        </div>
                    </div>
                    <div class="modify_patient_container_value">{{sex==1?'男':sex==2?'女':''}}</div>
                    <el-drawer :visible.sync="drawer" :direction="direction">
                        <el-button plain @click="onSelectMan" style="width: 100%">
                            男
                        </el-button>
                        <el-button plain @click="onSelectWoman" style="width: 100%;margin-top: 10px;margin-left:0px;">
                            女
                        </el-button>
                    </el-drawer>
                </div>
                <!-- 出生日期 -->
                <div class="modify_patient_container" style="border-top:0.5px solid #e7e7e7;">
                    <div class="mine_navigator_item modify_patient_container_left">
                        <div>出生日期</div>
                        <div style="color:#fe3116;">*</div>
                    </div>
                    <div  class="modify_patient_container_value"></div>
                    <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
                </div>
                <!-- 身高 -->
                <div class="modify_patient_container" style="border-top:0.5px solid #e7e7e7;">
                    <div class="mine_navigator_item modify_patient_container_left">
                        <div>身高</div>
                        <div style="color:#fe3116;">*</div>
                    </div>
                    <div  class="modify_patient_container_value"></div>
                    <el-input v-model="input" placeholder="请输入身高"></el-input>
                </div>
                <!-- 体重 -->
                <div class="modify_patient_container" style="border-top:0.5px solid #e7e7e7;">
                    <div class="mine_navigator_item modify_patient_container_left">
                        <div>体重</div>
                        <div style="color:#fe3116;">*</div>
                    </div>
                    <div  class="modify_patient_container_value"></div>
                    <el-input v-model="input" placeholder="请输入体重"></el-input>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                input: '',
                imageUrl: '',
                drawer: false,
                direction: 'btt',
                sex: '',
                circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
                squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
                sizeList: ["small"],
                form: {
                    date1: ''
                }
            }
        },
        methods: {

                handleAvatarSuccess(res, file) {
                    this.imageUrl = URL.createObjectURL(file.raw);
                },
                beforeAvatarUpload(file) {
                    const isJPG = file.type === 'image/jpeg';
                    const isLt2M = file.size / 1024 / 1024 < 2;

                    if (!isJPG) {
                        this.$message.error('上传头像图片只能是 JPG 格式!');
                    }
                    if (!isLt2M) {
                        this.$message.error('上传头像图片大小不能超过 2MB!');
                    }
                    return isJPG && isLt2M;
                },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            onSelectMan() {
                this.sex = 1;
            },
            onSelectWoman() {
                this.sex = 2;
            }
        }
    }
</script>

<style>
    .modifyandaddpatient_container {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        /* padding-bottom: 90px; */
        /* position: relative; */
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    /* 编辑/添加宝宝容器 */
    .modify_patient_container {
        padding-left: 15px;
        padding-right: 15px;
        height: 45px;
        /* padding-top: 13px; */
        /* padding-bottom: 13px; */
        display: flex;
        flex-direction: row;
        align-items: center;
        background-color: white;
        font-size: 13px;
        justify-content: space-between;
    }

    /* 编辑/添加宝宝图片大小 */
    .modify_patient_container image {
        width: 10px;
        height: 18px;
        margin-left: 5px;
    }

    /* 编辑或添加宝宝值 */
    .modify_patient_container_value {
        width: 100%;
        text-align: right;
        line-height: 20px;
        color: #bbbbbb;
    }

    /* 添加宝宝 输入框样式 */
    .modify_patient_container input {
        width: 100%;
        border: 0;
        min-height: 30px;
        text-align: right;
    }

    /* 左边文字提示 */
    .modify_patient_container_left {
        min-width: 100px;
    }

    .modify_patient_container input::-webkit-input-placeholder {

        color: #d1d1d1;
    }

    .modify_patient_container input:-moz-placeholder {

        color: #d1d1d1;
    }

    .modify_patient_container input::-moz-placeholder {

        color: #d1d1d1;
    }

    .modify_patient_container input:-ms-input-placeholder {
        color: #d1d1d1;
    }

    /* 左半部分图片文字布局 */
    .mine_navigator_item {
        display: flex;
        flex-direction: row;
    }


</style>
